<template>
    <div>
        <div class="m-style have-nav" v-show="model == 'search'">
            <block-index-nav-bar :title="'个人工资'"></block-index-nav-bar>
            <div>
                <div class="clientMess-box">
                    <div class="container">

                        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                            <van-list
                                :error.sync="error"
                                error-text="数据获取失败，点击重新加载"
                                offset="50"
                                v-model="loading"
                                :finished="finished"
                                @load="getData"
                            >
                                <div class="clientMess-demo clientMess-demo1" v-for="item in dataList">
                                    <div class="date" @click="toDetail(item)">
                                        <slot v-bind:row="item">
                                            <strong>{{ tabformatDate(item.salary_year) }}</strong>
                                        </slot>
                                    </div>
                                    <ul class="ul_tp comm_ul" @click="collapse(item)">
                                        <li v-for="field in cols.show">
                                            <span class="txt">{{ field.title }}</span>
                                            <span class="infos" :class="field.class">{{ item[field.field] }}</span>
                                        </li>
                                        <template v-if="item.show">
                                            <li v-for="(fie,key) in fields">
                                                <span class="txt">{{ fie['name'] }}</span>
                                                <span class="infos" :class="fie.class">{{ item[fie['field']] }}</span>
                                            </li>
                                        </template>
                                    </ul>
                                    <div class="clientMess-bt">
                                        <template v-if="item.show">
                                            <span class="n1" @click="collapse(item)">收起</span>
                                            <img src="../../../assets/tp3.png" alt="" class="xia">
                                        </template>
                                        <template v-else>
                                            <span class="n1" @click="collapse(item)">展开</span>
                                            <img src="../../../assets/tp.png" alt="" class="xia">
                                        </template>
                                    </div>
                                </div>

                                <div class="box-bt" v-if="finished">
                                    <span>没有更多了</span>
                                </div>
                            </van-list>
                        </van-pull-refresh>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import blockIndexNavBar from "@/components/blockIndexNavBar";
import {API_URL} from "@/config/urlInfo";
import m_pageList from "@/uitl/m_pageList";
import {Config} from "@/config/formDataOptions";

export default {
    name: "personalSalary",
    components: {
        blockIndexNavBar,
        m_pageList
    },
    data() {
        return {
            model: "search",
            number: "",
            error: false,
            url: API_URL.personalSalary,
            cols: {
                show: [
                    {title: '实发工资', field: '实发工资'},
                    {title: '应发工资', field: '应发工资'}
                ],
            },
            show: true,
            loading: false,
            // listCond: {id: this.$route.query.id},
            listCond: {},
            fields: [],
            refreshing: false,
            dataList: []
        }
    },
    mounted() {
        this.getFields()
    },
    methods: {
        tabformatDate(item) {
            let data = item
            if (data == null || data === '') {
                return ""
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1)
        },
        onSearch() {
            this.listCond = {
                number: this.number
            };
        },
        getFields() {
            // Config.getDatas("/hr/api/salary/getSalaryItemListAndTaxe", {}, res => {
            Config.getDatas(API_URL.salaryItemListAndTaxe, {}, res => {
                this.fields = res
            }, this)
        },
        onRefresh() {
            this.initData();
            this.getData();
        },
        initData() {
            this.error = false;
            this.currentPage = 1;
            this.finished = false;
            this.loading = true;
            this.dataList = [];
        },
        getData() {
            Config.getDatas(API_URL.personalSalary, {
                data: {
                    size: 15,
                    page: this.currentPage,
                    redemptionDate: this.date
                }
            }, (res) => {
                console.log("resresresres", res)
                let list = res.data
                this.loading = false;
                this.refreshing = false;
                if (!list || list.length < 15) {
                    this.finished = true;
                } else {
                    this.currentPage++;
                    this.finished = false;
                }
                this.dataList.push(...list)
            }, this)
        },
        collapse(item) {
            if (item.show === true) {
                this.$set(item, "show", false);
            } else {
                this.$set(item, "show", true);
            }
        },
        toDetail() {

        }
    }
}
</script>


<style scoped lang="less">
.search-btn {
    .van-button {
        width: 48%;
        margin-right: 1%;
    }

    background: #fff;
    text-align: center;
    padding: 11px 0;
}

.list-btn {
    .van-button {
        width: 45%;
        margin-right: 2%;
        float: right;
    }
}

.wt-card {
    margin: 0.4rem;
    background: #fff;
    overflow: hidden;
    border-radius: 0.3rem;
    padding: 0.4rem;
    box-shadow: 0 0 0.2rem #ccc;
    border-bottom: 0.1rem solid #ccc;
}


.icons-warp {
    border-radius: 25px;

    .float-icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 50px;
        height: 50px;

        img {
            width: 25px;
            height: 25px;
            margin-bottom: 3px;
        }

        span {
            font-size: 9px;
            color: #666666;
        }
    }
}


</style>